<script setup>
	import OrderItem from '../../components/OrderItem.vue'
	import { listOrderService, listOrderByStatusService } from '../../api/order'
	import { useUserStore } from '../../store/idnex.js'
	import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
	import { ref, nextTick } from 'vue'
	import waterMarker from "../../components/sdq-watermarker/waterMarker.vue"
	import { getWatermar } from '../../api/login.js'
		
		const watermarText = ref('')
		const isHide = ref(false)
		
		
		getWatermar().then(res => {
			if(!res.data.hide){
				watermarText.value = res.data.text
				isHide.value = true
			}
		})
	
	const user = useUserStore().user
	const orderList = ref([])
	
	const shouldRenderOrderItem = ref(true)

	const statusMap = {
	  all: -1,
	  pendingPayment: 0,
	  paid: [1, 2],
	  pendingReview: 3,
	  afterSales: [4, 5]
	};
	
	const action = ref('')
	
	/**  加载数据 */
	const loadData = async () => {
		let res
		if(action.value === '' || action.value == 'all'){
			res = await listOrderService(user.id)
		}else {
			res = await listOrderByStatusService(user.id, statusMap[action.value]);
		}
	 
		orderList.value = res.data
		shouldRenderOrderItem.value = false;
		await nextTick();
		shouldRenderOrderItem.value = true;
	}
	
	onLoad((options) => {
		action.value = options.action ? options.action : 'all'	
	})
	
	onShow(async () => {
		loadData()
	})
	
	
	const changeAction = async (ac, status) => {
	  action.value = ac;
	  try {
		let res;
		if (status === statusMap.all) {
		  res = await listOrderService(user.id);
		} else {
		  res = await listOrderByStatusService(user.id, status);
		}
		orderList.value = res.data;
	  } catch (error) {
		console.error('Error fetching orders:', error);
	  }
	};
	  
	
</script>

<template>
	<view class="container">
		<waterMarker v-if="isHide" col="4" row="8" :text="watermarText" opacity="0.1" color="black" rotate="-30deg"></waterMarker>
		
		<view class="nav-head">
			<view class=".nav-head-item">
				<text @click="changeAction('all', statusMap.all)" :class="action == 'all' ? 'active' : ''">全部</text>
			</view>
			<view class=".nav-head-item">
				<text @click="changeAction('pendingPayment', statusMap.pendingPayment)" :class="action == 'pendingPayment' ? 'active' : ''">待付款</text>
			</view>
			<view class=".nav-head-item">
				<text @click="changeAction('paid', statusMap.paid)" :class="action == 'paid' ? 'active' : ''">已支付</text>
			</view>
			<view class=".nav-head-item">
				<text @click="changeAction('pendingReview', statusMap.pendingReview)" :class="action == 'pendingReview' ? 'active' : ''">已完成</text>
			</view>
			<view class=".nav-head-item">
				<text @click="changeAction('afterSales', statusMap.afterSales)" :class="action == 'afterSales' ? 'active' : ''">售后</text>
			</view>
		</view>
		
		<view class="content-body">
			<template v-if="shouldRenderOrderItem">
				<OrderItem @loadData='loadData' class="OrderItem" ref="orderItemsRef" :goods='item.goods' :order='item' v-for="(item, index) in orderList" :key="item.id">
				</OrderItem>
			</template>

			
		</view>
	</view>
</template>

<style lang="scss">
	
	.OrderItem:last-child {
		height: 420rpx;
	}
	
	.active {
		font-weight: 600;
	}
	
	.content-body {
		width: 100%;
		height: 100%;
	}
	
	.nav-head {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 70rpx;
		border-bottom: 2rpx solid #cfd1cd;
		color: #595a58;
	}
	
	.container {
		width: 100%;
		height: 100vh;
	}

</style>
